<template>
	<view class="scoreView">
		<u-navbar title="成绩查询" :background="'#001f3f'" title-bold></u-navbar>


		<view class="container">
			<view class="header">
				<view class="score-types">
					<view class="score-type" :class="[type==1?'active':'']" @click="changeScoreType(1)">有效成绩</view>
					<!-- <view class="score-type" :class="[type==2?'active':'']" @click="changeType(2)">原始成绩</view> -->
					<view class="score-type" :class="{active:type==2}" @click="changeScoreType(2)">原始成绩</view>
				</view>

				<!-- 方式一：用u-picker组件，弹出选择 -->
				<view class="score-term" @click="show = true">
					选择学期<uni-icons class="ml-1" type="down" size="16"></uni-icons>
				</view>

				<!-- 方式二：用uni-popup自写组件，弹出选择 -->
				<!-- <view class="score-term" @click="openPopup">
					{{list[termIndex].termName}}<uni-icons class="ml-1" type="down" size="16"></uni-icons>
				</view> -->

				<view class="update-btn " style="width: 100rpx;height: 100rpx;">
					<view class="flex-1 flex justify-center align-center" style="height: 100%;"  @click="update" hover-class="bg-hover-light">
						<uni-icons type="reload" size="30" color="#E065E0" class="font-weight-normal"></uni-icons>
					</view>
				</view>

			</view>
			<view class="score-list p-3 mt-2">
				<view class="term-name text-center font-md">{{list[termIndex].termName}}</view>
				<view class="list mt-3">
					<view class="score-item  flex align-center justify-between mt-1" hover-class="bg-hover-light"
						style="min-height: 70rpx;" v-for="(item,index) in list[termIndex].scoreList" :key="index">
						<view class="course-name font">
							<view>{{item.name}}</view>
							<view v-if="type==2" class="raw-score__content">
								<view v-if="item.normalScore">平时：{{item.normalScore}}</view>
								<view>
									<text v-if="item.midtermScore">期中：{{item.midtermScore}} </text>
									<text v-if="item.finalScore">期末：{{item.finalScore}} </text>
								</view>
							</view>
						</view>
						<view v-if="type==1" class="font" :class="[item.score<60?'text-secondary':'course-score']">
							{{item.score}}
						</view>
						<view v-else class="font" :class="[item.complexScore<60?'text-secondary':'course-score']">
							{{item.complexScore}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 方式一：用u-picker组件，弹出选择 -->
		<u-picker mode="selector" v-model="show" :default-selector="[0]" :range="myselector"
			@confirm="confirm"></u-picker>

		<!-- 方式二：用uni-popup自写组件，弹出选择 -->
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="bg-white rounded-top" style="">
				<view class="popup-header position-relative">
					<view class="flex align-center justify-center border-bottom" style="height:120rpx;">
						<text class="font-md font-weight-bold">请选择学期</text>
						<view class="position-absolute top-0 right-0 p-3" @click="closePopup">
							<uni-icons type="close" size="30"></uni-icons>
						</view>
					</view>
				</view>
				<view class="popup-body" v-for="(item,index) in list" :key="index">
					<view class="flex align-center justify-center "
						style="height:100rpx;border-bottom: 1rpx solid rgba(232, 224, 235, 0.5);">
						<text class="font font-weight-bold text-secondary"
							@click="selectTerm(index)">{{item.termName}}</text>
					</view>
				</view>
				<view class="popup-footer">
					<view class="flex align-center justify-center" @click="closePopup" style="height:100rpx;">
						<text class="font-md font-weight-bold">取消</text>
					</view>
				</view>
			</view>
		</uni-popup>

		<view style="height: 100rpx;"></view>
	</view>
</template>

<script>
	import {
		getScoreListRequest,
		getRawScoreListRequest
	} from "@/api/main.js"
	const scoreCacheKey = "scores"
	const rawScoreCacheKey = "rawScores"

	export default {
		data() {
			return {
				selector: [1, 2, 3],
				show: false,

				type: 1, //1为有效成绩，2为原始成绩
				list: [{
					scoreList: [],
					termName: ''
				}],
				termIndex: 0, //当前学期索引
			}
		},
		computed: {
			myselector() {
				return this.list.map(item => {
					return item.termName
				})
			}
		},
		onLoad() {
			this.update()
		},
		methods: {
			confirm(e) {
				// console.log(e);
				this.termIndex = e[0]
				this.update()
			},
			openPopup() {
				this.$refs.popup.open()
			},
			closePopup() {
				this.$refs.popup.close()
			},
			selectTerm(e) {
				// console.log(111, e);
				this.termIndex = e
				this.$refs.popup.close()
				this.getList()
			},
			changeScoreType(e) {
				this.type = e
				this.getList()
			},
			getList() {
				const cache = uni.getStorageSync(this.type == 1 ? scoreCacheKey : rawScoreCacheKey)
				if (cache) {
					this.list = cache
					return
				}
				this.update()
			},
			update() {
				uni.showLoading({
					title: '加载中'
				})
				let p = null
				if (this.type == 1) {
					p = getScoreListRequest()
				} else {
					p = getRawScoreListRequest()
				}
				p.then(res => {
					uni.hideLoading()
					this.list = res.data
					// console.log(this.list);
					uni.setStorageSync(this.type == 1 ? scoreCacheKey : rawScoreCacheKey, res.data)
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scoreView {
		height: 100vh;
		background: linear-gradient(0deg,
				rgba(161, 140, 209, 0.2) 0%,
				rgba(251, 194, 235, 0.2) 100%);
	}

	.container {

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;

			&>view {
				justify-content: space-between;
				width: 312rpx;
				height: 100rpx;
				border-radius: 20px;
				background: rgba(255, 255, 255, 0.82);
				box-shadow: 0px 0px 10px -20px rgba(0, 0, 0, 0.05);
			}

			.score-types {
				padding: 8rpx 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;



				.score-type {
					width: 150rpx;
					height: 70rpx;
					border-radius: 20px;
					background: rgba(230, 230, 230, 0.8);
					box-shadow: 0px 0px 10px -20rpx rgba(0, 0, 0, 0.05);
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.active {
					color: #FFFFFF;
					background: #E065E0;
					box-shadow: 0px 0px 10px -20rpx rgba(0, 0, 0, 0.05);
				}
			}

			.score-term {
				width: 180rpx;
				padding: 10rpx 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 22rpx;
				color: #3b3b3b;
			}
		}

		.score-list {
			width: 100%;
			border-radius: 20rpx;
			background: #FAFAFA;
			box-shadow: 0px 0px 10px -20rpx rgba(0, 0, 0, 0.05);

			.score-item {

				&:not(:last-child) {
					border-bottom: 1rpx solid rgba(232, 224, 235, 0.5);
				}

				.course-name {
					.raw-score__content {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
				}

				.course-score {
					color: #E065E0;
				}

				.fail {
					color: #9c9c9c;
				}
			}

		}
	}
</style>